/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("drop") {
    $titon-drop-class: generate-class-name($titon-drop);
    $titon-drop-modifiers: map-get($titon-drop, "modifiers");

    #{$titon-drop-class} {
        position: absolute;
        top: 100%;
        left: 0;
        width: 15rem;
        line-height: 1;
        z-index: map-get($titon-settings-zindex, "drop");
        opacity: 0;
        visibility: hidden;
        transition: all map-get($titon-drop, "transition");
        background: #fff;
        text-align: #{bidi-alignment()};

        // Active
        &.is-expanded {
            @extend %placeholder-show;
        }

        // Nested
        #{$titon-drop-class} {
            display: block;
            top: 0;
            #{bidi-alignment()}: 90%;
            z-index: map-get($titon-settings-zindex, "drop") + 1;
        }

        ul {
            @extend %placeholder-list;
        }

        li {
            position: relative;

            > a {
                padding: theme-setting("medium-padding");
                display: block;

                .caret-right,
                .caret-left {
                    float: bidi-opposite-alignment();
                    display: none;
                }
            }

            &.has-children {
                > a {
                    .caret-right,
                    .caret-left {
                        display: inline-block;
                    }
                }
            }

            // Show nested dropdown
            &:hover {
                #{$titon-drop-class} {
                    visibility: visible;
                    opacity: 1;
                    #{bidi-alignment()}: 100%;
                }
            }
        }
    }

    #{generate-class-name($titon-drop, "divider")} {
        margin: (theme-setting("margin") / 2) 0;
        border-top: 1px solid theme-setting("bg-light");
    }

    #{generate-class-name($titon-drop, "header")} {
        padding: theme-setting("medium-padding");
    }

    //-------------------- Modifiers --------------------//

    @if (is-feature-enabled("all-modifiers") or index($titon-drop-modifiers, "up")) {
        #{generate-class-name($titon-drop, "", "up")} {
            top: auto;
            bottom: 100%;
        }
    }

    @if (is-feature-enabled("all-modifiers") or index($titon-drop-modifiers, "right")) {
        #{generate-class-name($titon-drop, "", "right")} {
            top: auto;
            left: 100%;
        }
    }

    @if (is-feature-enabled("all-modifiers") or index($titon-drop-modifiers, "left")) {
        #{generate-class-name($titon-drop, "", "left")} {
            top: auto;
            left: auto;
            right: 100%;
        }
    }

    @if (is-feature-enabled("all-modifiers") or (index($titon-drop-modifiers, "right") or index($titon-drop-modifiers, "left"))) {
        #{generate-class-name($titon-drop, "", "right")},
        #{generate-class-name($titon-drop, "", "left")} {
            &.reverse-align {
                bottom: 0;
            }
        }
    }

    @if (is-feature-enabled("all-modifiers") or (index($titon-drop-modifiers, "down") or index($titon-drop-modifiers, "up"))) {
        #{generate-class-name($titon-drop, "", "down")},
        #{generate-class-name($titon-drop, "", "up")} {
            &.reverse-align {
                left: auto;
                right: 0;
            }
        }
    }
}
